<script type='text/javascript' language='javascript'>
//VARS
var url_base = "{url_base}";
var quant_list = '{quant_list}'; // valor vindo do parser do controller

$(document).ready(function(){
    /**
     * Verifica se existe mensagem de erro de validação
     */
    if(($("#messege-alert").hasClass("erro") && window.location.toString() == url_base + 'usuario/atualizar') || ($("#messege-alert").hasClass("aviso") && window.location.toString() == url_base + 'usuario/atualizar')){
        show_form('edit');
    }else if(($("#messege-alert").hasClass("erro") && window.location.toString() == url_base + 'usuario/cadastrar') || ($("#messege-alert").hasClass("aviso") && window.location.toString() == url_base + 'usuario/cadastrar')){
        show_form('insert');
    }else if(getQueryVariable('editar')){ // Verifica se existe a variavel GET editar existe
        get_user(getQueryVariable('editar'));
    }
   
     /** Ampliar Imagem **/
     $('.ampli_img_user').lightBox({
         imageLoading: url_base + 'assets/img/lightbox-ico-loading.gif',
         imageBtnClose: url_base + 'assets/img/lightbox-btn-close.gif',
         imageBtnPrev: url_base + 'assets/img/prev.gif',
         imageBtnNext: url_base + 'assets/img/next.gif',
         imageBlank: url_base + 'assets/img/lightbox-blank.gif',
         containerResizeSpeed: 350,
         txtImage: 'Imagem do usuário',
         txtOf: 'de'
     });

     /** Volta para o top da página **/
     $('.img_top').click(function(){
         scroll_to("#page-content");
     });

    /** MASCARAS **/
    $("#data_nascimento").mask("99/99/9999");
    
    /** DATA **/
    $( "#data_nascimento" ).datepicker({
        dateFormat: 'dd/mm/yy',
        changeMonth: true,
        changeYear: true
    });
    
   
   /**
    * Filtrar dados do dataGrid pelo código
    */
   $(".codigo").click(function() {
        if(window.location.toString() == url_base + 'usuario/listar/cod/1/' + quant_list){
            window.location = url_base + 'usuario/listar/cod/2/' + quant_list;
        }else {
            window.location = url_base + 'usuario/listar/cod/1/' + quant_list;
        }
       return false;
   });
   
   /**
    * Filtrar dados do dataGrid pelo nome
    */
   $(".nome").click(function() {
       if(window.location.toString() == url_base + 'usuario/listar/nome/1/' + quant_list){
           window.location = url_base + 'usuario/listar/nome/2/' + quant_list;
       }else {
           window.location = url_base + 'usuario/listar/nome/1/' + quant_list;
       }
       return false;
   });
   
   /**
    * Filtrar dados do dataGrid pelo email
    */
   $(".email").click(function() {
       if(window.location.toString() == url_base + 'usuario/listar/email/1/' + quant_list){
           window.location = url_base + 'usuario/listar/email/2/' + quant_list;
       }else {
           window.location = url_base + 'usuario/listar/email/1/' + quant_list;
       }
       return false;
   });
   
   /**
    * Filtrar dados do dataGrid pelo data de cadastro
    */
   $(".data_cadastro").click(function() {
       if(window.location.toString() == url_base + 'usuario/listar/cadastro/1/' + quant_list){
           window.location = url_base + 'usuario/listar/cadastro/2/' + quant_list;
       }else {
           window.location = url_base + 'usuario/listar/cadastro/1/' + quant_list;
       }
       return false;
   });
   
   /**
    * Filtrar dados do dataGrid pelo data do último login
    */
   $(".ultimo_login").click(function() {
       if(window.location.toString() == url_base + 'usuario/listar/login/1/' + quant_list){
           window.location = url_base + 'usuario/listar/login/2/' + quant_list;
       }else {
           window.location = url_base + 'usuario/listar/login/1/' + quant_list;
       }
       return false;
   });
   
   /**
    * Filtrar dados do dataGrid pelo status
    */
   $(".status").click(function() {
       if(window.location.toString() == url_base + 'usuario/listar/status/1/' + quant_list){
           window.location = url_base + 'usuario/listar/status/2/' + quant_list;
       }else {
           window.location = url_base + 'usuario/listar/status/1/' + quant_list;
       }
       return false;
   });
   
   
    /** Filtra dados QUANTIDADE **/
    $(".filter_quant").change(function() {
        window.location = url_base + 'usuario/listar/cod/2/' + $(this).val();
        return false;
    });
    
    
   /**
    * fecha formulario
    */
   $('#bt_cancel').click(function(){
       $("#form-insert").fadeOut();
       scroll_to('#page-content');
   });
    
    /** Valida Imagem */
    $('#imagem').change(function(){
        if((document.form_insert.imagem.value.lastIndexOf(".jpg")==-1) && (document.form_insert.imagem.value.lastIndexOf(".jpeg")==-1) && (document.form_insert.imagem.value.lastIndexOf(".JPG")==-1) 
            && (document.form_insert.imagem.value.lastIndexOf(".png")==-1) && (document.form_insert.imagem.value.lastIndexOf(".PNG")==-1)){
            document.form_insert.imagem.value = "";
            alert("Este arquivo não possui uma extensão válida!" +
                "\n Extensão permitida: .jpg e .png");
        }else {
            $('#fakeImagem').val($('#imagem').val());
            $('.img_user').fadeOut();
        }
    });

    /** Remover imagem caso selecionada */
    $('#remove_imagem').click(function(){
        $('.img_user').fadeOut();
        $('#imagem, #fakeImagem').val("");
    });
        
    /** Seleção das categorias **/
    $( "#selectable_grupos" ).selectable({
        stop: function() {
            var ids = new Array();
            $('#grupo_id').val("");
            $( ".ui-selected", this ).each(function() {
                ids.push($(this).val());
                $('#grupo_id').val(ids.toString()); // joga os ids para o input
            });
        },
        //Seleciona os itens já escolhidos
        create: function(event, ui) {
            var ids = $('#grupo_id').val().split(',');
            $('#selectable_grupos .grupos_select').each(function(index){
                for(var i = 0; i <= ids.length; i++){
                    if( $( this ).val() == ids[i]){
                        $( this ).addClass('ui-selected');
                    }
                }
            });
        }
    });

    /** Abre campo motivo caso o status seja marcado como inativo */
    $('#status').change(function() {
        if($(this).val() == 0) {
            $('.box_motivo').fadeIn();
        }else {
            $('.box_motivo').fadeOut();
            $('#motivo').val("");
        }
    });
    
    /** Abre o box_motivo sempre que o valor do select for 0 **/ 
    $("#status option:selected").val() == 0 ? $('.box_motivo').fadeIn() : '';
});

/**
 * Retirna do controller o usuário selecionado para edição
 */
function get_user(codigo){
    $("#loading-data").fadeIn();
    
    $.ajax({
        url: '{url_base}usuario/get_user_json',
        type:'POST',
        dataType: 'json',
        data: { idUsuario: codigo },
        success: function(data){
            $("#loading-data").fadeOut();
            $('#messege-alert').fadeOut();
            clear_form();
            
            $("#codigo").val(data.usuario.id);
            $("#nome").val(data.usuario.nome);
            $("#sobrenome").val(data.usuario.sobrenome);
            $("#email, #re_email").val(data.usuario.email);
            $(".txt_senha").html("<i> Não é possível vizualizar a senha porque para <b>maior segurança ela é criptografada.</b><br />\n\
            - Para alterar a senha basta preencher os campos. Se deixar em branco a senha permanecerá a mesma.</i>");
            $("#senha").attr('placeholder', 'Digite uma nova senha');
            $("#fakeImagem").val(data.usuario.imagem);
            $("#imagem_original").val(data.usuario.imagem);
            $(".img_user img").attr('src', '{url_base}../ibbcg/media/upload/user/' + data.usuario.imagem);
            $(".img_user a").attr('href', '{url_base}../ibbcg/media/upload/user/' + data.usuario.imagem);
            $(".img_user").show();
            $("#data_nascimento").val(data.usuario.data_nascimento);
            //Grupos do usuário
            var ids_grupo = new Array();
            $(data.usuario.grupos).each(function(index, grupo){
                ids_grupo.push(grupo.id);
            });
            $('#grupo_id').val(ids_grupo.toString());
            $('#selectable_grupos .grupos_select').each(function(index){
                for(var i = 0; i <= ids_grupo.length; i++){
                    if( $( this ).val() == ids_grupo[i]){
                        $( this ).addClass('ui-selected');
                    }
                }
            });
            
            //Select status
            if(data.usuario.status == 0){
                $("#status")[0].selectedIndex = 1;
                $(".box_motivo").show();
            }else{
                $("#status")[0].selectedIndex = 0;
                $(".box_motivo").hide();
            }
            
            show_form("edit");
        },
        error: function (data){ //Erro do back-end
            $("#loading-data").fadeOut();
            $("#form-insert").hide('slow');
            $("#show-alert").html(erro_message());
            scroll_to("#page-content");
        }
    }); 
}

/**
 * Função par abrir o form Insert ou Update de acordo com o parametro
 * 
 * @param string Nome da ação
 * Podendo ser new, erro ou sucess
 */
function show_form(action) {
    if(action == "edit"){ // UPDATE data
        $("#bt_submit").val("Atualizar usuário");
        $("#form-insert-usuario").attr("action", "{url_base}usuario/atualizar");
        $("#form-insert legend").html("<h3>Atualizar dados do usuário</h3>");
    }else if(action == "insert"){
        $("#form-insert-usuario").attr("action", "{url_base}usuario/cadastrar");
        $("#form-insert legend").html("<h3>Cadastrar um novo usuário</h3>");
    }else{
        $("#bt_submit").val("Cadastrar usuário");
        $("#form-insert-usuario").attr("action", "{url_base}usuario/cadastrar"); 
        $("#form-insert legend").html("<h3>Cadastrar um novo usuário</h3>");
        clear_form();
    }
    $("#form-insert").show('slow');
    $(".input1").focus();

    // Analisa se deve colocar a visão no content grid ou deixar no show-alert
    if($("#messege-alert").hasClass("erro") || $("#messege-alert").hasClass("aviso")) {
        // o foco fica na mensagem
    } else {
        scroll_to("#content-datagrid");
    }
}

/**
 * Limpa o form e list de itens selecionadoa 
 */
function clear_form() {
    $("#codigo, #nome, #sobrenome, #email, #re_email, #senha, #re_senha, #fakeImagem, #imagem, #imagem_original, #data_nascimento, #grupo_id").val("");
    $("#senha").attr('placeholder', 'Digite uma senha');
    $(".img_user, .box_motivo").hide();
    $('#status').prop('selectedIndex', 0);
    $('#selectable_grupos .grupos_select').each(function(){
         $( this ).removeClass('ui-selected');
    });
}

/*
 * Carrega os dados do autor selecionada para remoção
 */    
function delete_user(codigo) {
    $("#loading-data").fadeIn();

    if(get_code().length > 1){
        $("#codigoDelete").val(get_code());
        $("#nomeDelete").val("");
        $("#loading-data").fadeOut();
        $("#inforDel").html('<p>Deseja realmente excluir os Usuários selecionados?<br /><span style="color: #cc0000; font-size: 15px; font-weight: bold;">'  + get_code().length + ' no total.</span> <br />Uma vez excluído não será possível recuperar os dados.');
        open_dialog_delete();
    }else{
        $.ajax({
            url: '{url_base}usuario/get_user_json',
            type:'POST',
            dataType: 'json',
            data: { idUsuario: codigo },
            success: function(data){
                $("#loading-data").fadeOut();
                $('#messege-alert').fadeOut();
                $("#form-insert").hide('slow');

                $("#codigoDelete").val(data.usuario.id);
                $("#nomeDelete").val(data.usuario.nome);
                $("#inforDel").html('<p>Deseja realmente excluir o Usuário:<br /><span style="color: #cc0000; font-size: 15px; font-weight: bold;">'  + data.usuario.nome + ' ' + data.usuario.sobrenome + '?' + '</span> <br />Uma vez excluído não será possível recuperar os dados.');

                open_dialog_delete();
            },
            error: function (data){ //Erro do back-end
                $("#loading-data").fadeOut();
                $("#form-insert").hide('slow');
                $("#show-alert").html(erro_message());
                scroll_to("#page-content");
            }
        });
    }
}

/*
 * DIALOG para confirmar remoção da Autor
 */
function open_dialog_delete() {
    $(".dialog-excluir").dialog({
        height: 195,
        width: 420,
        resizable: false,
        draggable: true,
        modal: true,
        buttons: {
            'Sim': function() {
                $(this).dialog('close');
                $("#form-delete-usuario")[0].submit();
            },
            'Não': function() {
                $(this).dialog('close');
            }
        }
    });
}

/**
 * Retirna do controller o usuário selecionado para edição
 */
function get_group(codigo){
    $("#loading-data").fadeIn();

    $.ajax({
        url: '{url_base}grupo/get_group_json',
        type:'POST',
        dataType: 'json',
        data: { idGrupo: codigo },
        success: function(data){
            $("#loading-data").fadeOut();
            $('#messege-alert').fadeOut();
            
            $('.group span h3').text(data.grupo.nome);
            $('.group .desc_group').text(data.grupo.descricao);
            $('.action').html('');
            $( data.grupo.acoes).each(function( index, acao ) {
                $('.action').append( ' <span><h4>' + acao.nome + '</h4></span>' );
                $('.action').append( '<p class="desc_action">' + acao.descricao + '</p>' );
            });
            
            //Mostra a DIV
            $('.group_infor').fadeIn();
            scroll_to(".group_infor");
        },
        error: function (data){ //Erro do back-end
            $("#loading-data").fadeOut();
            $("#form-insert").hide('slow');
            $("#show-alert").html(erro_message());
            scroll_to("#page-content");
        }
    }); 
}
</script>
<article>
    <div id="box-search">
        <form id="search" name="search" action="{url_base}usuario/buscar/cod/2/{quant_list}">
            <input type="search" name="search_term" class="input_search" placeholder="Buscar usuário pelo código, nome, e-mail ou data de cadastro"/>
            <a class="search_refresh" href="{url_base}usuario">
                <img title="Atualiza página descartando a busca" align="center" src="<?php echo site_url('assets/img/refresh.png'); ?>"/>
            </a>
        </form>
    </div> 
    <div id="filter_item">
        <i>Quantidade por página:</i>
        <form id="quant_list">
            <?php 
                echo form_dropdown('filter_quant', array(10 => '10', 20 => '20', 30 => '30', 50 => '50'), isset($quant_list) ? $quant_list : '', 'class="filter_quant"'); 
            ?>
        </form>
    </div>
    <div id="datagrid">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" value="1" id="select-all" name="select-all" title="Selecionar registros"></th>
                    <th><a href="" class="codigo">Código</a></th>
                    <th><a href="" class="nome">Nome completo</a></th>
                    <th><a href="" class="email">E-Mail</a></th>
                    <th><a href="" class="data_cadastro">Data de cadastro</a></th>
                    <th><a href="" class="ultimo_login">Último login</a></th>
                    <th><a href="" class="status">Status</a></th>
                    <th colspan="2">Ação</th>
                </tr>
            </thead>
            <?php if(isset($usuarios)): ?>
            <tfoot>
                <tr>
                    <td colspan="9">
                        <div id="paginacao">
                            <ul class="pagination">
                                {pagination}
                            </ul>
                        </div>
                        <div id="total-register">
                            Total: {total_rows}
                        </div>
                    </td> 
                </tr>
            </tfoot>					
            <tbody>
                <?php if(isset($usuarios)): foreach ($usuarios as $index => $usuario): ?>
                <tr class="<?php echo strtolower($usuario->get_nome_status()); ?> pointer"  ondblclick="get_user('<?php echo $usuario->id; ?>')">
                    <td width="10">
                        <input type="checkbox" name="cod[]" value="<?php echo $usuario->id; ?>" class="codigoId">
                    </td>
                    <td width="60"><?php echo $usuario->id; ?></td>
                    <td><?php echo $usuario->get_nome_completo(); ?></td>
                    <td><?php echo $usuario->email; ?></td>
                    <td title="Usuário há: <?php echo diff_date(date('Y-m-d'), date_american($usuario->data_cadastro)); ?>"><?php echo format_date($usuario->data_cadastro, TRUE); ?></td>
                    
                    <td title="<?php echo $usuario->ultimo_login != NULL ? data_to_string($usuario->ultimo_login) : ''; ?>"><?php echo $usuario->ultimo_login != NULL ? format_date($usuario->ultimo_login) : 'Não fez login ainda'; ?></td>
                    <td title="<?php echo $usuario->status == TOUsuario::USER_INATIVO ? $usuario->motivo_inatividade : ''; ?>"><?php echo $usuario->get_nome_status(); ?></td>
                    <td width="20">
                        <a title="Editar registro" onclick="get_user('<?php echo $usuario->id; ?>')">
                            <img align="center" src="{url_base}/assets/img/edit.png"/>
                        </a>
                    </td>
                    <td width="20"> 
                        <a title='Excluir registro' onclick="delete_user('<?php echo $usuario->id; ?>')">
                            <img align="center" src="{url_base}/assets/img/delete.png"/>
                        </a>
                    </td>
                </tr>
                <?php endforeach; endif; ?> <!-- END loop usuários -->
                <?php endif; ?>
            </tbody>
        </table>
    </div> <!-- END of #datagrid -->
</article>
<button type="button" class="button" id="new-data" onclick="show_form();">Cadastrar um novo usuário</button>
<div id="main-content-datagrid" class="form-author">
    <div id="loading-data">
        <img src="{url_base}assets/img/loading.gif" width="220" height="20"/>
    </div>
    <div id="content-datagrid">
        <section id="form-insert">
            <form action="{url_base}autor/cadastrar" id="form-insert-usuario" name="form_insert" method="post" accept-charset="utf-8" enctype="multipart/form-data">
                <fieldset>
                    <legend><h3>Cadastrar Um Novo Usuário</h3></legend>
                    <div id="content_form">
                        <input  type="hidden" name="codigo" id="codigo" value="<?php echo set_value('codigo'); ?>"/>
                        <label>
                            <p>Name*:</p>
                            <input class="input1" type="text" name="nome" id="nome" value="<?php echo set_value('nome'); ?>" autofocus required="required" required/>
                        </label>
                        <label>
                            <p>Sobrenome*:</p>
                            <input type="text" name="sobrenome" id="sobrenome" value="<?php echo set_value('sobrenome'); ?>" required="required" required/>
                        </label>
                        <label>
                            <p>E-Mail*: <i>Este e-mail será utilizado para realizar o login no sistema</i></p>
                            <input type="email" name="email" id="email" value="<?php echo set_value('email'); ?>" autocomplete="off" placeholder="Digite o e-mail" required="required" required/>
                        </label>
                        <label>
                            <input type="email" name="re_email" id="re_email" value="<?php echo set_value('re_email'); ?>" placeholder="Digite novamente o e-mail" autocomplete="off" required/>
                        </label>
                        <label>
                            <p>Senha:<span class="txt_senha"><br /><i>- Se não for preenchido este campo, a senha inicial será a DATA DE NASCIMENTO. XXXXXXXX, apenas números.</i></span></p>
                            <input type="password" name="senha" id="senha" value="<?php echo set_value('senha'); ?>" placeholder="Digite uma senha" autocomplete="off"/>
                        </label>
                        <label>
                            <input type="password" id="re_senha" name="re_senha" value="<?php echo set_value('re_senha'); ?>" placeholder="Digite novamente a senha" autocomplete="off"/>
                        </label>
                        <label>
                            <p>Imagem: <i>Só é possível inserir imagem no formato <b>JPG</b> e <b>PNG</b>.</i></p>
                            <span class="hide img_user"><a href="" class="ampli_img_user"><img src="" height="110" width="80" title="Ampliar imagem"/></a><br /></span>
                            <span class="selInputFile">
                                <span>
                                    <input type="hidden" name="imagem_original" id="imagem_original"/>
                                    <input type="text" placeholder="Clique aqui para inserir a imagem do usuário" name="fakeImagem" id="fakeImagem" autocomplete="off"/><!-- este e somente para aparecer o nome do arquivo para o usuario -->
                                    <input type="file" name="imagem" id="imagem" autocomplete="off"/>
                                </span>
                                <a class="pointer" title="Remover imagem" id="remove_imagem">
                                    <img align="center" src="{url_base}assets/img/delete.png"/>
                                </a>
                            </span>
                        </label>
                        <label>
                            <p>Data de nascimento*:</p>
                            <input type="text" name="data_nascimento" id="data_nascimento" value="<?php echo set_value('data_nascimento'); ?>" placeholder="Digite a data de nascimento XX/XX/XXXX" required/>
                        </label>
                        <label>
                            <p>Grupo(s)*: <i>Caso o <b>Grupo</b> não esteja listado, vá para o cadastro de grupos e adicione.</i></p>
                            <p><i>- Segure a tecla <b>Ctrl</b> para selecionar mais de um grupo.</i><br />
                            <i>- <b>Clique duplo</b> no grupo exibe as ações pertecentes a ele.</i></p><br />
                            <input id="grupo_id" name="grupo_id" type="hidden" value="<?php echo set_value('grupo_id'); ?>" />
                            <div id="list_grupos">
                                <section>
                                    <div class="group_infor">
                                        <img src="<?php echo site_url('assets/img/close_16.png'); ?>" width="16" height="16" class="bt-close" onclick="close_message('.group_infor');"/>
                                        <div class="group">
                                            <span>GRUPO:<h3></h3></span>
                                            <p class="desc_group"></p>
                                        </div>
                                        <h3>Ações pertencentes:</h3>
                                        <div class="action"></div>
                                    </div>
                                </section>
                                <ol id="selectable_grupos">
                                    {grupos}
                                    <li class="grupos_select pointer" value="{id}" title="{descricao}" ondblclick="get_group('{id}')">{nome}</li>
                                    {/grupos}
                                </ol>
                            </div>
                        </label>
                        <label>
                            <p>Status*: <i>Aqui você tem duas opções:</i><br />
                                <i>
                                    <b>&nbsp;&nbsp;&nbsp;&nbsp;ATIVO >></b> Nesta opção o usuário fica <b>HABILITADO</b> para realizar as ações cabíveis ao seu grupo.<br />
                                    <b>&nbsp;&nbsp;&nbsp;&nbsp;INATIVO >></b> Nesta opção o usuário fica <b>INABILITADO</b> para realizar todas ações. Opção útil quando por algum motivo deseja <b>BLOQUEAR</b> o usuário...
                                </i>
                            </p>
                            <?php echo form_dropdown("status", array(1 => "Ativo", 0 => "Inativo"), set_value('status'), "id='status'"); ?>
                        </label>
                        <label class="box_motivo" style="display: none;">
                            <p>Motivo da inatividade*:</p>
                            <textarea name="motivo_inatividade" id="motivo" placeholder="Informe o motivo do usuário ficar inativo"><?php echo set_value('motivo_inatividade'); ?></textarea>
                        </label>
                        <input type="submit" value="Cadastrar usuário" id="bt_submit" class="button">&nbsp;
                        <a id="bt_cancel" class="button pointer">Cancelar</a>
                    </div>
                </fieldset>
            </form>
        </section>
            
        <section id="form-delete">
            <div class="dialogModal dialog-excluir">
                <h2>Atenção!</h2>
                <div id="inforDel"></div>    
            </div>
                <form action="{url_base}usuario/excluir" id="form-delete-usuario" method="post" accept-charset="utf-8">
                    <input type="hidden" id="codigoDelete" name="codigoDelete"/>
                    <input type="hidden" id="nomeDelete" name="nomeDelete"/>
                    <input type="hidden" id="imagemDelete" name="imagemDelete"/>
                </form>
        </section>
    </div> <!-- END of #content-datagrid -->
</div> <!-- END of #main-content-datagrid -->
    